/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from "react";
import styles from './conditioncountry.module.css'
import icon_arrow_down_nor from "@/assets/icon_arrow_down_nor.webp"

/** 条件-选择地区框 */
export default function ConditionCountry({ label, values, onChange }) {
    const defaultHint = "Country";
    const [hint, setHint] = useState(defaultHint);
    const [isHovered, setIsHovered] = useState(false);

    useEffect(() => {
        if (values) {
            for (let i = 0; i < values.length; i++) {
                const item = values[i];
                if (item.checked === true && item.label && item.label.length > 0) {
                    setHint(item.label);
                    break;
                }
            }
        } else {
            setHint(defaultHint);
        }
    }, [values])

    const handleSelect = (item) => {
        setHint(item.label);
        onChange && onChange(item);
    }

    return (
        <div className={styles.conditionCountryRoot}>
            {/* 标题 */}
            <div className={styles.conditionCountryLabel}>{label}</div>

            {/* 输入框 */}
            <div
                className={styles.conditionCountryContent}
                onMouseEnter={() => { setIsHovered(true) }}
                onMouseLeave={() => { setIsHovered(false) }}
            >
                {/* 下拉值 */}
                <div className={`${styles.conditionCountryHint} ${hint === defaultHint ? '' : styles.conditionCountryValue}`}>{hint}</div>
                {/* 下拉图标 */}
                <img className={styles.conditionCountryArrowIcon} alt="" src={icon_arrow_down_nor} />

                {isHovered && (
                    <div className={styles.conditionCountryDropdownContainer}>
                        {values && values.map((item, index) => (
                            <div
                                key={index}
                                className={`${styles.conditionCountryDropdownItem} ${item.checked ? styles.conditionCountryDropdownItemSelected : ''}`}
                                onClick={() => handleSelect(item)}
                            >
                                {item.label}
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    )
}